---
layout: "docs.njk"
title: Supported Color Spaces
has_mavo: true
body_classes: cn-ignore
---
{% raw %}
<section class="cn-ignore">
	<figure>
		<img src="images/all-spaces.png" alt="">
		<figcaption>Tree of all color spaces supported by Color.js as of June 2022.</figcaption>
	</figure>

	<p>Color spaces are <code>ColorSpace</code> objects.
	Every function in Color.js that takes a color space reference can take it in one of two forms:</p>

	<ul>
		<li>A string id of a <em>registered color space</em></li>
		<li>A <code>ColorSpace</code> object</li>
	</ul>

	<p>When you import a module that defines a color space in the Object-Oriented API, this uses <code>ColorSpace.create()</code> which does two things:</p>
	<ol>
		<li>It invokes the <code>ColorSpace</code> constructor to create a new <code>ColorSpace</code> object</li>
		<li>It calls <code>ColorSpace.register()</code> to register the color space so it can be referenced with a string id.
		This just adds the color space to the <code>ColorSpace.registry</code> object.</li>
		</li>
	</ol>
	
	<p> If you are using the <a href="procedural.html">prodcedural API</a>, you need to register color spaces yourself, by calling <code>ColorSpace.register(colorSpaceReference)</code>.
</section>

<section mv-app="colorSpaces" mv-bar="none" class="cn-ignore">
	<div mv-list property="space">
	<article mv-list-item class="[if(id != originalId, 'alias')">
		<header>
			<h2 id="[id]">
				<span property="name"></span>
				<code property="id" class="toc-ignore"></code>
			</h2>

			<a href="https://github.com/LeaVerou/color.js/tree/master/[filePath]" class="file" target="_blank"><code property="filePath">src/spaces/[aliasOf or id].js</code></a>
		</header>

		<div mv-if="isAlias">
			<p class="alias-of">Alias of <a href="#[aliasOf]">[aliasOfName]</a></p>
		</div>
		<div property class="description" mv-markdown-options></div>

		<dl class="meta">
			<div mv-if="base">
				<dt>Base</dt>
				<dd><a href="#[base]"><strong property="baseName"></strong></a></dd>
			</div>
			<dt>White point:</dt>
			<dd><strong property="whitePoint"></strong></dd>

			<dt>Coordinates:</dt>
			<dd>
				<table>
					<thead>
						<tr>
							<th>Id</th>
							<th>Name</th>
							<th>Ref. range</th>
						</tr>
					</thead>
					<tbody>
						<tr mv-multiple property="coord">
							<th property="id"></th>
							<th property="name"></th>
							<td>
								<span property="min"></span>
								&ndash;
								<span property="max"></span>
								<meta property="codeExample" content="color.[replace(space.id, '-', '_')].[id] = [random(min, max)];">
								<meta property="randomCoord" content="[random(min, max) & '']">
							</td>

						</tr>
					</tbody>
				</table>
			</dd>
		</dl>

		<pre><code mv-expressions="{{ }}">let color = new Color("{{ space.id }}", [{{randomCoord}}]);
{{ join(codeExample, "\n") }}
color.toString();</code></pre>

		<a property="url" class="read-more">Learn more about [name]</a>

	</article>
	</div>
</section>
<pre class="cn-ignore" id="spaceData" mv-app="colorSpaceData" mv-storage="../get/modules.json"></pre>
{% endraw %}
